import React from 'react'
import {inject, observer} from 'mobx-react';
import {toJS} from 'mobx';
import {Carousel, WingBlank,Tools,Popover,Icon,Badge } from 'weaver-mobile';
import { TabPage, ListViewPage } from 'weaver-mobile-page';
import { Route, withRouter } from 'react-router-dom';
import Doc from '../doc';
import NewsSearch from '../news/NewsSearch'
import QueueAnim from 'rc-queue-anim';
import NewsTag from './NewsTag';
// import noImg from '../../img/noimg.png'
const getLabel = Tools.getLabel;
//const noImg = "/images/ecology9/doc/mobile_default.png";
const noImg = "/images/ecology9/doc/mobile_thumbnail_default.png";
@withRouter
@inject('newsStore')
@observer
class News extends React.Component {
 
  componentDidMount() {
    const {match, newsStore} = this.props, {params} = match, {scope} = params;
    if (!newsStore.inited) {
      newsStore.init(scope);
    }else{
      newsStore.refreshLoading(newsStore.typeId)
    }
  }
  updateCarouselDocsub = (docsubject) =>{
    const {newsStore} = this.props;
    newsStore.updateCarouselDocsub(docsubject);
  }
  setEllivisible = (visible) =>{
    const {newsStore} = this.props;
    newsStore.elliVisible = visible;
  }
  render() {
    const {newsStore} = this.props;
    let {carouselLocation, newsList,newsType, typeId,typeIdindex, current,elliVisible,imgData,
      scope, newsListViewPageStore,cloumnNoData} = newsStore;
    const carouselDrawer = (
      <div className="news-carousel-span" style={newsList.length === 0?{display:'none'}:{display:'block'}}>
          <div className="news-carousel" >
            <WingBlank>
              <Carousel
                selectedIndex = {carouselLocation}
                autoplay
                infinite
                autoplayInterval = {3000}
                dotActiveStyle={{width:'8px',height:'8px'}}
                afterChange={imgData.length === 0?null:index => newsStore.updateCarouselDocsub(imgData[index].docsubject, index)}
              >
                {toJS(imgData).map(val => (
                    <a
                      key={val.docid}
                      onClick={() => this.props.history.push(`/news/${scope}/doc/${val.docid}`)}
                      style={{ display: 'inline-block', width: '100%', height: 176 }}
                    >
                      <img
                        className="carousel-img"
                        src={val.docimg?'/weaver/weaver.file.FileDownload?fileid='+val.docimg+'&thumbnail=1':noImg}
                        alt=""
                        style={{ width: '100%', verticalAlign: 'top',height: 176 }}
                      />
                    </a>
                ))}
              </Carousel>
            </WingBlank>
          </div >
          <div className="news-span-div">
            <span className="news-span" >{newsStore.carouselDocsub}</span>
          </div>
      </div>
    )
    return (
      <div className="wea-news-whitebg">
          <Route
            key="news-doc"
            path="/news/:scope/doc/:id"
            render={() => {
              return (
                <QueueAnim>
                  <div className="wm-route-layout" key="news-doc-div">
                    <Doc path={`/news/${scope}`}/>
                  </div>
                </QueueAnim>
              );
            }}
          />
          <Route
            key="news-search"
            path="/news/:scope/newsSearch"
            render={() => {
              return (
                <QueueAnim>
                  <div className="wm-route-layout" key="news-search-div">
                    <NewsSearch path={`/news/${scope}`}/>
                  </div>
                </QueueAnim>
              );
            }}
          />
          <NewsTag />
          <TabPage
            className="news-tabpage"
            tabs={toJS(newsType)}
            popover = {true}
            btns={[
              // <Icon type="more-3" className="more-icon" onClick={newsStore.newstagisshow}/> 
            ]}
            tabProps={{
              onTabClick:(tab, index) => {
                newsStore.ListBackTop();
                newsStore.getNews(tab.id);
                newsStore.setChooseTabid(tab,index);
                newsStore.setCarouselLocation();
              },
              page: typeIdindex
            }}
            popoverProps={{
              visible:elliVisible,
              overlay: [
                <Popover.Item key="search">{getLabel(347, '高级搜索')}</Popover.Item>,
                <Popover.Item key="tagsort">{getLabel(21412, '标签排序')}</Popover.Item>,
                // <Popover.Item key="collect">{getLabel(18030, '我的收藏')}</Popover.Item>
                <Popover.Item key="createDoc">新建文档</Popover.Item>,
              ],
              onSelect: (tab, index) => {
                const {newsStore, history} = this.props, {searchAd} = newsStore;
                newsStore.elliVisible = false;
                if(tab.key === 'tagsort'){
                  newsStore.newstagisshow()
                }else if(tab.key === 'search'){
                  // TODO 收藏现在没有方案
                  let url = tab.key === 'search' ? searchAd.path : `/`;
                  history.push(url); 
                }else if(tab.key == 'createDoc'){
                	this.props.history.push(`/add/39`);
                }
              },
              onVisibleChange: this.setEllivisible.bind(this),
            }}
          >
          </TabPage>
          <div className="wea-news-list">
            {
              cloumnNoData
              ? <div className="wea-doc-error">
                  <Icon type="no-data" size="lg"/>
                  <div>{getLabel(83553, "暂无数据")}</div>
                </div>
              :
               newsListViewPageStore && 
              (newsStore.cloumnShowtype === "2"
                ?<ListViewPage.Normal
                  className="news-am-list-systemdoc"
                  getDataCustom={true}
                  store={newsListViewPageStore}
                  customHeight="100%"
                  onRowClick={(rowData) => {
                    newsStore.setDocIsNew(rowData.docid);
                    window.location=`/spa/document/static4mobile/index.html#/doc/${rowData.docid}`;
                    // this.props.history.push(`/news/${scope}/doc/${rowData.docid}`);
                  }}
                  getTemplate={this.getSystemDocTemplate}
                  onEndReached={newsStore.getNews.bind(this, typeId, current + 1)}
                  onRefresh={() => newsStore.refreshLoading(newsStore.typeId)}
                />
                : <ListViewPage.Normal
                  className="news-am-list"
                  getDataCustom={true}
                  renderHeader={()=>carouselDrawer}
                  store={newsListViewPageStore}
                  onRowClick={(rowData) =>{
                    window.location=`/spa/document/static4mobile/index.html#/doc/${rowData.docid}`;
                    //  this.props.history.push(`/news/${scope}/doc/${rowData.docid}`)
                    }
                  }
                  getTemplate={this.getTemplate}
                  onEndReached={newsStore.getNews.bind(this, typeId, current + 1)}
                  onRefresh={() => newsStore.refreshLoading(newsStore.typeId)}
                />)
            }
          </div>
      </div>
    )
  }
  
  getTemplate = (template) => {
    const newTemp = {
      ...template,
      default: [{
        key: 'col_1',
        render: (rowData) => {
          return (
            <div key={rowData.docid} className={rowData.summary?"news-desc-item":"news-nodesc-item"}>
              <img src={rowData.docimg?'/weaver/weaver.file.FileDownload?fileid='+ rowData.docimg +'&thumbnail=1':noImg} alt="" className="news-item-img"/>
              <div className="news-item-info">
                <div className="news-item-title">{rowData.docsubject}</div>
                <div className="news-item-desc">{rowData.summary}</div>
                <div className="news-item-operateDate">{rowData.docupdatedate}</div>
              </div>
            </div>
          );
        },
      }],
    };
    return newTemp;
  }

  getSystemDocTemplate = (template) => {
    const newTemp = {
      ...template,
      default: [{
        key: 'col_1',
        render: (rowData) => {
          const itemClsPre = 'system-doc-list-row';
          const isnew = parseInt(rowData.isnew);
          return (
            <div key={rowData.docid} className={itemClsPre}>
              {
                rowData.icon.iconUrl ?
                  <img src={rowData.icon.iconUrl} alt="" className={`${itemClsPre}-img`}/>
                  :
                  <Icon type={`${rowData.icon.iconType}`} size="lg" className={`${itemClsPre}-img`} color={`${rowData.icon.iconColor}`}/>
              }
              {isnew ? <Badge dot/> : ''}
              <div className={`${itemClsPre}-content`}>
                <div className={`${itemClsPre}-title`}>{rowData.docsubject}</div>
                <div className={`${itemClsPre}-sub`}>
                  <span className={`${itemClsPre}-sub-username`}>{rowData.owner}</span>
                  <span>{rowData.docupdatedate}</span>
                  {/* { <span className={`${itemClsPre}-sub-right`}>{rowData.docstatus}</span>} */}
                </div>
              </div>
            </div>
          );
        },
      }],
    };
    return newTemp;
  }
}

export default News;
